<template>
  <div class="tables">
    <el-table :data="tableData" style="width: 100%" border v-loading="loadings">
      <el-table-column prop="inds" label="序号" width="100">
        <template slot-scope="scope">
          <div>{{ getIndex(scope.$index) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="role" label="角色">
        <template slot-scope="scope">
          <div v-if="scope.row.role == '1'">管理员</div>
          <div v-else>普通成员</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="control"
        label="操作"
        v-if="$store.state.user.info.role == '2'"
      >
        <template slot-scope="scope">
          <!-- <el-button type="danger" @click="deletes(scope.row.id)" size="small"
            >删除</el-button
          > -->
          <el-popconfirm title="这是一段内容确定删除吗？"  @onConfirm="confirm(scope.row.id)" >
            <template #reference>
              <el-button
              type="danger"
              size="small"
              >删除</el-button
            >
            </template>
          </el-popconfirm>
          <el-button
            type="warning"
            @click="edit(scope.row)"
            size="small"
            style="margin: 0 0 0 0.5vw"
            >编辑</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <addUser ref="addUser" />
  </div>
</template>

<script>
import addUser from "./dialog/addUser.vue";
export default {
  props: ["data", "total", "loading"],
  components: {
    addUser,
  },
  data() {
    return {
      tableData: [],
      pag: {
        total: 0,
        pageNo: 1,
        pageSize: 5,
      },
      loadings: true,
    };
  },
  computed: {},
  methods: {
    //修改
    edit(e) {
      this.$refs.addUser.dialogVisible = true;
      this.$refs.addUser.title = "成员信息修改";
      this.$refs.addUser.form = Object.assign(this.$refs.addUser.form, e);
    },
    options() {},
    deletes(e) {
      this.$http.get(`/deleteUser/${e}`).then((res) => {
        // if (res.code == 200) {
        //   this.$message.success("删除成功");
        //   //定义查询
        //   let obj = {
        //     current: this.pag.current,
        //     pageSize: this.pag.pageSize,
        //   };
        //   //判断当前页是否是最后一条
        //   if (this.tableData.length - 1 == 0) {
        //     obj.current = obj.current - 1;
        //   }
        //   obj = Object.assign(obj, this.$parent.$refs.searches.queryForm);
        //   this.$parent.getlist(obj);
        // } else {
        //   this.$message.error(res.msg);
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.$parent.pag.pageNo = 1;
          this.$parent.getlist({ pageNo: 1, pageSize: 5 });
        }
        // }
      });
    },
    //统计
    getIndex(e) {
      return (this.$parent.pag.pageNo - 1) * this.$parent.pag.pageSize + e + 1;
    },
    confirm(e) {
      this.deletes(e)
    },
  },
  created() {
    this.tableData = this.data;
    this.pag.total = this.total;
  },
  watch: {
    data(newV) {
      this.tableData = newV;
    },
    loading(newV) {
      this.loadings = newV;
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../styles/pages.scss");
.el-pagination {
  display: flex;
}
</style>